<template>
  <div class="container">
    <div class="day-choose">
      <div
        v-for="(day, index) in 7"
        class="day-cell"
        :class="{ 'current-day': isCurrentDay(index) }"
        @click="setDay(index)"
      >
        <div class="week">{{ index ? getWeek(index) : "今天" }}</div>
        <div class="date">
          {{ currentDay(index) }}
        </div>
      </div>
    </div>
    <div class="time-choose">
      <div
        @click="!checkTime(time) ? (chooseTime = time) : ''"
        class="time-cell"
        :class="{
          'current-time': chooseTime === time,
          'invalid-time': checkTime(time)
        }"
        v-for="time in timeArr"
      >
        {{ time }}
      </div>
    </div>
    <div class="bottom-bar">
      <div class="tips">实际到达时间可能会有30分钟浮动</div>
      <div @click="setTime" class="btn">确定选择</div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
moment.locale("zh-cn");
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      currentTime: new Date(),
      chooseDay: null,
      timeArr: [],
      chooseTime: null
    };
  },

  computed: {},

  watch: {},

  methods: {
    ...mapMutations(["setServiceTime"]),
    setTime() {
      if (!this.chooseTime) {
        this.$dialog.toast({
          mes: "请选择服务时间！"
        });
        return;
      }
      this.setServiceTime(
        moment(this.chooseDay).format("YYYY-MM-DD") +
          " " +
          this.chooseTime +
          ":00"
      );
      this.$router.go(-1);
    },
    checkTime(time) {
      //只能预约5个小时后的服务
      return moment(this.chooseDay.format("YYYY-MM-DD") + " " + time + ":00")
        .subtract(5, "h")
        .isBefore(moment());
    },
    isCurrentDay(index) {
      return moment(this.currentTime)
        .add(index, "days")
        .isSame(this.chooseDay, "day");
    },
    setDay(index) {
      this.chooseDay = moment(this.currentTime).add(index, "days");
    },
    getWeek(index) {
      return moment(this.currentTime)
        .add(index, "days")
        .format("ddd");
    },
    currentDay(index) {
      return moment(this.currentTime)
        .add(index, "days")
        .format("MM.DD");
    }
  },

  created() {
    this.chooseDay = moment(this.currentTime);
    for (let i = 0; i < 24; i++) {
      this.timeArr.push(
        moment(this.currentTime)
          .startOf("day")
          .add(8.5 + i * 0.5, "h")
          .format("HH:mm")
      );
    }
  },

  components: {}
};
</script>
<style lang="less" scoped>
.container {
  .day-choose {
    background: #fff;
    height: 2rem;
    display: flex;
    .day-cell {
      color: #888;
      font-size: 0.52rem;
      width: 100/7%;
      text-align: center;
      line-height: 0.8rem;
      padding-top: 0.18rem;
    }
    .current-day {
      color: #0078ff;
    }
  }
  .time-choose {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0.24rem;
    .time-cell {
      width: 3.2rem;
      height: 1.6rem;
      background: #fff;
      border-radius: 0.16rem;
      color: #666;
      font-size: 0.64rem;
      text-align: center;
      line-height: 1.6rem;
      margin-bottom: 0.4rem;
      transition-duration: 0.3s;
    }
    .current-time {
      background: rgba(224, 239, 255, 1);
      border: 0.02rem solid rgba(51, 147, 255, 1);
      color: #3393ff;
    }
    .invalid-time {
      background: #dfdfdf;
      color: #999999;
    }
  }
  .bottom-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    .tips {
      text-align: center;
      color: #666;
      font-size: 0.4rem;
    }
    .btn {
      width: calc(100% - 0.8rem);
      background: rgba(0, 120, 255, 1);
      height: 1.6rem;
      color: #fff;
      font-size: 0.64rem;
      text-align: center;
      line-height: 1.6rem;
      margin: 0.4rem 0.4rem 0.8rem;
    }
  }
}
</style>
